<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>grid system demo</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style>
        .row {
            margin-bottom: 20px;
        }

        .row .row {
            margin-top: 10px;
            margin-bottom: 0;
        }

        [class*="col"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>
<body>

<div class="container">
    <!--
        1. 下面这个就是对grid的特性的一个说明, 打开页面即可查看.
    -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th></th>
                <th>
                    超小屏幕
                    <small>手机 (&lt;768px)</small>
                </th>
                <th>
                    小屏幕
                    <small>平板 (≥768px)</small>
                </th>
                <th>
                    中等屏幕
                    <small>桌面显示器 (≥992px)</small>
                </th>
                <th>
                    大屏幕
                    <small>大桌面显示器 (≥1200px)</small>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th class="text-nowrap" scope="row">栅格系统行为</th>
                <td>总是水平排列</td>
                <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row"><code>.container</code> 最大宽度</th>
                <td>None （自动）</td>
                <td>750px</td>
                <td>970px</td>
                <td>1170px</td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row">类前缀</th>
                <td><code>.col-xs-</code></td>
                <td><code>.col-sm-</code></td>
                <td><code>.col-md-</code></td>
                <td><code>.col-lg-</code></td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row">列（column）数</th>
                <td colspan="4">12</td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row">最大列（column）宽</th>
                <td class="text-muted">自动</td>
                <td>~62px</td>
                <td>~81px</td>
                <td>~97px</td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row">槽（gutter）宽</th>
                <td colspan="4">30px （每列左右均有 15px）</td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row">可嵌套</th>
                <td colspan="4">是</td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row">偏移（Offsets）</th>
                <td colspan="4">是</td>
            </tr>
            <tr>
                <th class="text-nowrap" scope="row">列排序</th>
                <td colspan="4">是</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--
    1. container-fluid和container的区别就是:
        - container-fluid是充满屏幕的, 而container是不占满屏幕的.
    2. 观察页面效果, 会发现查过12列的div会自动跑到下一行显示
-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1 text-center">1</div>
        <div class="col-md-1 text-center">2</div>
        <div class="col-md-1 text-center">3</div>
        <div class="col-md-1 text-center">4</div>
        <div class="col-md-1 text-center">5</div>
        <div class="col-md-1 text-center">6</div>
        <div class="col-md-1 text-center">7</div>
        <div class="col-md-1 text-center">8</div>
        <div class="col-md-1 text-center">9</div>
        <div class="col-md-1 text-center">10</div>
        <div class="col-md-1 text-center">11</div>
        <div class="col-md-1 text-center">12</div>
        <div class="col-md-1 text-center">13</div>
        <div class="col-md-1 text-center">14</div>
        <div class="col-md-1 text-center">15</div>
        <div class="col-md-1 text-center">16</div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-3">3-1</div>
        <div class="col-md-3">3-2</div>
        <div class="col-md-3">3-3</div>
        <div class="col-md-3">3-4</div>
    </div>

    <div class="row">
        <!--
            1. 过长的内容会使div自动增加长度, 但是英文不行, 英文会越界超出到其他列中.
        -->
        <div class="col-md-3">萨达是安抚第三方第三方水电费都是发多少的非a萨达是安抚第三方第三方水电费都是发多少的非</div>
        <div class="col-md-3">3-2</div>
        <div class="col-md-3">3-3</div>
    </div>

    <div class="row">
        <!--
            1. 使用col-md-offset-2属性来使栅格偏移;
        -->
        <div class="col-md-4 col-md-offset-2">hello</div>
    </div>

    <!--
        1. 栅格的嵌套.
    -->
    <div class="row">
        <div class="col-md-9">
            <div class="col-xs-8">
                first
            </div>
            <div class="col-xs-4">
                second
            </div>
        </div>
    </div>

    <!--
        1. col-md-push-3会使当前栅格向后移动3个格子;
        2. col-md-pull-9会使当前栅格向前移动9个格子;
    -->
    <div class="row">
        <div class="col-md-9 col-md-push-3">9</div>
        <div class="col-md-3 col-md-pull-9">3</div>
    </div>
</div>

</body>
</html>